<template>
	<div class="pos">
		<el-row>
			<el-col :span='7' class="pos-order" id="order-list">
				<el-tabs>
					<el-tab-pane label="点餐">
						<el-table :data="tableData" border style="width:100%">
							<el-table-column prop="goodsName" label="商品"></el-table-column>
							<el-table-column prop="count" label="数量" width="50"></el-table-column>
							<el-table-column prop="price" label="金额" width="70"></el-table-column>
							<el-table-column label="操作" width="100" fixed="right">
								<template slot-scope="scope">
									<el-button type="text" size="small" @click="delOneGoods(scope.row)">删除</el-button>
									<el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="count">
							<small>总量：</small>{{totalCount}} &nbsp;&nbsp;&nbsp;&nbsp;
							<small>总额：</small>{{totalMoney}}元
						</div>
						<div>
							<!--<el-button type="warning">挂单</el-button>-->
							<el-button type="danger" @click="delAllGoods">删除</el-button>
							<el-button type="success" @click="checkOut">结帐</el-button>
						</div>
					</el-tab-pane>
					<el-tab-pane label="挂单">
						挂单
					</el-tab-pane>
					<el-tab-pane label="外卖">
						外卖
					</el-tab-pane>
				</el-tabs>
			</el-col>
			<el-col :span='17'>
				<div class="ofter-goods">
					<div class="title">
						常用商品
					</div>
					<div class="ofter-goods-list">
						<ul>
							<li v-for="item in oftenGoods" @click="addOrderList(item)">
								<span>{{item.goodsName}}</span>
								<span class="o-price">￥{{item.price}}元</span>
							</li>
						</ul>
					</div>
					<div class="goods-type">
						<el-tabs>
							<el-tab-pane label="汉堡">
								<ul class='cookList'>
									<li v-for="item in type0Goods" @click="addOrderList(item)">
										<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
										<span class="foodName">{{item.goodsName}}</span>
										<span class="foodPrice">￥{{item.price}}元</span>
									</li>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="小食">
								<ul class='cookList'>
									<li v-for="item in type1Goods" @click="addOrderList(item)">
										<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
										<span class="foodName">{{item.goodsName}}</span>
										<span class="foodPrice">￥{{item.price}}元</span>
									</li>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="饮料">
								<ul class='cookList'>
									<li v-for="item in type2Goods" @click="addOrderList(item)">
										<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
										<span class="foodName">{{item.goodsName}}</span>
										<span class="foodPrice">￥{{item.price}}元</span>
									</li>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="套餐">
								<ul class='cookList'>
									<li v-for="item in type3Goods" @click="addOrderList(item)">
										<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
										<span class="foodName">{{item.goodsName}}</span>
										<span class="foodPrice">￥{{item.price}}元</span>
									</li>
								</ul>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
		name: 'Pos',
		created() {
			axios.get('http://jspang.com/DemoApi/oftenGoods.php').then(
				response => {
					console.log(response);
					this.oftenGoods = response.data;
				}
			).catch(
				error => {
					alert('网络错误');
				}
			);

			axios.get('http://jspang.com/DemoApi/typeGoods.php').then(
				response => {
					console.log(response);
					this.type0Goods = response.data[0];
					this.type1Goods = response.data[1];
					this.type2Goods = response.data[2];
					this.type3Goods = response.data[3];
				}
			).catch(
				error => {
					alert('网络错误')
				}
			);
		},
		data() {
			return {
				tableData: [],
				oftenGoods: [],
				type0Goods: [],
				type1Goods: [],
				type2Goods: [],
				type3Goods: [],
				totalCount: 0,
				totalMoney: 0
			}
		},
		methods: {
			addOrderList: function(goods) {
				let isHave = false;
				for(var i = 0; i < this.tableData.length; i++) {
					console.log(this.tableData[i].goodsId);
					if(goods.goodsId == this.tableData[i].goodsId) {
						isHave = true;
					}
				}
				if(isHave) {
					//数量++
					let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
					arr[0].count++;
				} else {
					//新增
					let newGoods = {
						goodsId: goods.goodsId,
						goodsName: goods.goodsName,
						price: goods.price,
						count: 1
					};
					this.tableData.push(newGoods);
				}
				this.totalCount++;
				this.totalMoney += goods.price;
			},
			delOneGoods: function(goods) {
				this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
				this.countAndMoney();
			},
			countAndMoney : function(){
				let list = this.tableData,count = 0,money = 0;
				for (let i = 0; i < list.length ; i++) {
					count += list[i].count;
					money += Number(list[i].price);
				}
				this.totalCount = count;
				this.totalMoney = money;
			},
			delAllGoods: function() {
				this.tableData = [];
				this.totalCount = 0;
				this.totalMoney = 0;
			},
			checkOut: function() {
				if(this.totalCount != 0) {
					this.delAllGoods();
					this.$message({
						message: '结帐成功！',
						type: 'success'
					});
				} else {
					this.$message.error('不能结空帐！');
				}

			}
		}
	}
</script>

<style scoped>
	.pos-order {
		height: 600px;
		border-right: 1px solid#ddd;
		padding: 10px;
	}
	
	.title {
		text-align: left;
		height: 40px;
		border-bottom: 1px solid #D3DCE6;
		background-color: #F9FAFC;
		padding: 10px;
	}
	
	.ofter-goods-list {
		padding: 20px;
	}
	
	.ofter-goods-list ul li {
		list-style: none;
		float: left;
		border: 1px solid #E5E9F2;
		padding: 10px;
		margin: 5px;
		background-color: #fff;
	}
	
	.o-price {
		color: #58B7FF;
	}
	
	.goods-type {
		clear: both;
		padding: 10px;
	}
	
	.cookList {
		margin: 20px;
	}
	
	.cookList li {
		list-style: none;
		width: 23%;
		border: 1px solid #E5E9F2;
		height: auot;
		overflow: hidden;
		background-color: #fff;
		padding: 2px;
		float: left;
		margin: 2px;
	}
	
	.cookList li span {
		display: block;
		float: left;
	}
	
	.foodImg {
		width: 40%;
	}
	
	.foodName {
		font-size: 17px;
		padding-left: 10px;
		color: brown;
	}
	
	.foodPrice {
		font-size: 16px;
		padding-left: 10px;
		padding-top: 10px;
	}
</style>